<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>两个不同组件的通信</title>
    <script src="../res/vue.js"></script>
    <link rel="stylesheet" href="app.css"></link>
</head>
<body>
<script type="text/javascript">
</script>
<div id="app-1">
    <first-component></first-component>
    <second-component></second-component>
</div>
</body>
<script type="text/javascript">
    var bus = new Vue();
    Vue.component('firstComponent',{
        template:'<button v-on:click="fireEvent">点击向另一个组件传递内容</button>',
        methods:{
            fireEvent:function () {
                bus.$emit('sendMessage',{
                    message:'你好组件'
                })
            }
        }
    });
     Vue.component('secondComponent',{
        template:'<span ref="secondMessage">{{sencodMessage}}</span>',
        data:function(){
            return {
                sencodMessage:'hello Wold'
            }
        },
        methods:{
            listeners:function () {

            }
        }
    });
    bus.$on("sendMessage",function(messageObj){
        app.$children[1].sencodMessage = messageObj.message;
        console.log();;
    });
    var app = new Vue({
        el:'#app-1',
        data:{
            message:'',
        }
    });
</script>
</html>